<template>
  <div>
    <el-dialog title="添加用户" :visible.sync="IsAddUser" width="50%" :before-close="handleClose" @close="addDialdgClose">
      <!-- 内容区域 -->
      <el-form
        :model="addForm"
        :rules="addFormRules"
        ref="addFormRef"
        label-width="80px"
      >
        <el-form-item label="编号" prop="UserCode">
          <el-input v-model="addForm.UserCode"></el-input>
        </el-form-item>
        <el-form-item label="用户名" prop="UserName">
          <el-input v-model="addForm.UserName"></el-input>
        </el-form-item>
        <el-form-item label="真实姓名" prop="RealName">
          <el-input v-model="addForm.RealName"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="UserPwd">
          <el-input type="password" v-model="addForm.UserPwd"></el-input>
        </el-form-item>
        <!-- <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
          <el-button @click="resetForm('ruleForm')">重置</el-button>
        </el-form-item> -->
      </el-form>

        <!-- 底部区域 -->
      <span slot="footer" class="dialog-footer">
        <el-button @click="IsAddUser = false">取 消</el-button>
        <el-button type="primary" @click="addUser">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: {
    IsAddUser: {
      type: Boolean,
      default: false
    }
  },
  data(){
      return {
          //添加用户的表单数据
          addForm:{
              UserCode:'',
              UserName:'',
              RealName:'',
              UserPwd:''
          },
          //添加表单的验证规则对象
          addFormRules:{
              UserCode:[
                  { required: true, message: '请输入编号', trigger: 'blur' },
                  {min:3,max:11,message:'长度在3到11个字符之间',trigger:'blur'}
              ],
              UserName:[
                  { required: true, message: '请输入用户名称', trigger: 'blur' },
              ],
              RealName:[
                  { required: true, message: '请输入真实姓名', trigger: 'blur' },
              ],
              UserPwd:[
                  { required: true, message: '请输入密码', trigger: 'blur' },
              ]
          }
      };
  },
  methods: {
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then(_ => {
          done();
        })
        .catch(_ => {});
    },
    //监听关闭添加用户的对话框事件
    addDialdgClose(){
        this.$refs.addFormRef.resetFields();
    },
    //添加用户
    addUser(){
         this.$refs.addFormRef.validate(valid=>{
             if(!valid){
                 return
             }
             //请求后台执行添加
            this.$post("/api/User/AddUser",this.addForm).then(res=>{
                if(res.code==0){
                    this.$alert(res.msg,"提示");
                    //刷新父级的table
                    this.$emit("shuaxUser");
                    this.IsAddUser=false;
                    
                }else{
                    this.$alert(res.msg,"提示")
                }
            }).catch(err=>{
                this.$alert("网络异常","提示")
            })
         })
        
    }
    
  },
  watch: {
    IsAddUser: function(newVal) {
      let data = {
        IsShow: newVal
      };
      this.$emit("IsShowAddUser", data);
    }
  }
};
</script>